<!DOCTYPE html>
<html>
<head lang="en">

    <title>积分商城</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="../css/shop/myshow.css">
    <script>
        function paramsMatter(value,row,index) {
            var span=document.createElement('span');
            span.setAttribute('title',value);
            span.innerHTML = value;
            return span.outerHTML;
        }

        function formatTableUnit(value, row, index) {
            return {
                css: {
                    "white-space": 'nowrap',
                    "text-overflow": 'ellipsis',
                    "overflow": 'hidden'
                }
            }
        }
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-5">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <span style="text-align: center">积分商城</span>
    </div>
</div>
<div class="text" style="text-align: center">精品推荐</div>
<hr>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div id="travelsCommends">
        <div class="carousel-inner" render-loop="list">
            <div class="carousel-item">
                <div style="text-align: center">
                   <span class="productname" render-html="list.name"></span>
                </div>
                <a href="/productDetails.html?id=" render-fun="setHref" render-key="list.id">
                    <img class="d-block w-100" render-src="list.img" width="90%" height="300px">
                    <div style="text-align: center;color: #00adff">
                        兑换积分:<span class="salePrice" render-html="list.salePrice"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only"></span>
    </a>
</div>
<hr>
<div class="text" style="text-align: center">积分兑好礼</div>
<hr>
<!--商品分类导航栏-->
<div class="tab-content" id="pills-tabContent">
    <ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <!--地区的页签拼接处-->
    </ul>
</div>
<div class="operation">
    <button class="btn btn-success" onclick="window.location.href='/mine/myiintegral.html'"><span style="height:15px; font-size:15px;" size=65 baiduSug=1><li class="fa fa-rmb fa-1x myclass"></li></span></button>
    <button class="btn btn-danger" onclick="window.location.href='/mine/shoppingcart.html'"><span style="height:15px; font-size:15px;" size=65 baiduSug=1><li class="fa fa-shopping-cart fa-1x mycart">购物车</li></span></button>
</div>
<script>
    var userStr = sessionStorage.getItem("user");
    var userId;
    var car="购物车: ";
    var myIntegral;
    if(userStr){
        userId=JSON.parse(userStr).id
        //商城回显用户积分
        $.get("/integral/"+userId,function (data) {
            console.log(data);
            if(data){
                var integral="我的积分: "
                myIntegral = data.count
                $(".myclass").after(integral+myIntegral)
            }else{
                var integral="我的积分: "
                $(".myclass").after(integral+0)
            }
        })
    }
    //回显购物车数据
    var cartNum = sessionStorage.getItem("cartNum")
    if(cartNum){
        $(".mycart").html(car+cartNum)
    }
    //兑换 shopBtn 使用动态绑定
    $("#pills-tabContent").on("click", ".shopBtn", function () {
        var span =  $(this).parent()[0];
        //找到父元素,获取data值
        var product = $(span).data('json')
        console.log(product);
        if(myIntegral>product.salePrice){
            var msg ='亲,你确认要兑换 '+product.name+' ,花费积分'+product.salePrice+''
            $(document).dialog({
                type : 'confirm',
                closeBtnShow: true,
                content: msg,
                onClickConfirmBtn: function(){
                    $.post("/orderList",{'user.id':userId,'product.id':product.id,'price':product.salePrice},function (data) {
                        if(data.success) {
                            var toast5 = $(document).dialog({
                                type : 'toast',
                                infoIcon: '../img/icon/loading.gif',
                                infoText: '亲,窝窝正在努力加载中',
                            });
                            setTimeout(function () {
                                toast5.update({
                                    infoIcon: '../img/icon/success.png',
                                    infoText: '兑换成功',
                                    autoClose: 2500,
                                });
                            }, 3000);
                        }
                    })
                }
            });
        }else{
            $(document).dialog({
                type : 'toast',
                infoIcon: '../img/icon/fail.png',
                infoText: '积分不足',
                autoClose: 1000
            });
        }



    });
    //加入购物车 saveBtn
    $("#pills-tabContent").on("click", ".saveBtn", function () {
        var span =  $(this).parent()[0];
        var product = $(span).data('json')

        $.post("/product",{'id':product.id},function (data) {
            if(data.success){
                //回显购物车数据
                var size = data.data.length
                $(".mycart").html(car+size)
                sessionStorage.setItem("cartNum", JSON.stringify(size));
                sessionStorage.setItem("cartData", JSON.stringify(data.data));
                $(document).dialog({
                    type : 'toast',
                    infoIcon: '../img/icon/success.png',
                    infoText: '成功',
                    autoClose: 1000
                });
            }else{
                $(document).dialog({
                    type : 'confirm',
                    closeBtnShow: true,
                    content: data.msg,
                    onClickConfirmBtn: function(){
                        window.location.href="/mine/shoppingcart.html"
                    }
                });
            }
        })
        console.log(this);

    });
    //精品推荐
    $.get("/product/", {"statu": 1}, function (data) {
        $("#travelsCommends").renderValues(data, {
            setHref: setHref
        });
        $(".carousel-item:first").addClass("active");
    }, "json")
    //导航栏显示
    var typeId=1;//将地区的id定义在事件外面，默认查询第一个分类
    $.get("/product/productType", function (data) {
        if (data) {
            var html = "";
            var pills = "";
            $.each(data, function (index, ele) {
                html += '<li class="nav-item"><a data-id="' + ele.id + '" class="nav-link" id="pills-' + ele.id + '-tab" data-toggle="pill" href="#pills-' + ele.id + '">' + ele.name + '</a></li>';
                pills += '<div class="tab-pane fade" id="pills-' + ele.id + '"></div>';
            })
            $("#pills-tab").html(html)
            $("#pills-tabContent").append(pills);
            $("#pills-1").addClass("active show")
            $.get("/product/", {"typeId":typeId}, function (data) {
                $("#pills-"+typeId).html(data);
                console.log("点击了");
            }, "html")
        }
    });
    //分类显示数据

    //动态绑定点击事件
    $("#pills-tab").on("click", ".nav-link", function () {
        typeId = $(this).data("id");
        if (typeId) {
            //访问生成页面的接口
            $.get("/product/", {"typeId":typeId}, function (data) {
                $("#pills-"+typeId).html(data);
                console.log("点击了");
            }, "html")
        }
    });

    //翻页函数
    var currentPage = 2;
    var totalPage = 2;//临时的总页数,先设值成2,防止第一次翻页无法进行
    function goPage() {
        $.get("/product/", {"typeId":typeId,"currentPage": currentPage}, function (data) {
            //使用定义了的变量进行运算操作，必须赋予初始值
            var html='';
            $.each(data.list, function (index, ele) {
                html +='<div style="margin-bottom: 20px">'+
                    '<div class="row news-detail" id="product-'+ele.id+'">'+
                    '<div class="col-5">'+
                    '<a href="/productDetails.html?id='+ele.id+'">'+
                    '<img src="'+ele.img+'">'+
                    '</a>'+
                    '</div>'+
                    '<div class="col-7">'+
                    '<a href="/productDetails.html?id='+ele.id+'">'+
                    '<h4>'+ele.name+'</h4>'+
                    '<p>'+ele.intro+' </p>'+
                    '</a>'+
                   /* '<p>兑换积分:<span data-json='${entity.jsonString}'>${entity.salePrice} &nbsp&nbsp <button type="button" class="btn btn-info btn-sm shopBtn">立即兑换</button>&nbsp<button type="button" class="btn btn-danger btn-sm saveBtn">加入购物车</button></span>*/
                    '<p>兑换积分:<span data-json='+ele.jsonString+'>'+ele.salePrice+'<button type="button" class="btn btn-info btn-sm shopBtn">立即兑换</button>&nbsp<button type="button" class="btn btn-danger btn-sm saveBtn">加入购物车</button></span>'+
                    '</div>'+
                    '</div>'+
                    '<hr>'+
                    '</div>';
            });
            //拼接在全部攻略对应的div中
            $(".classify").append(html);
            currentPage+=1;
            totalPage = data.pages;
        }, "json")
    }
    //滑动分页事件
    //监视屏幕滚动，到达页尾开始翻页
    $(window).scroll(function () {
        //在推荐页时不进行操作
        if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
            //防止无限翻页
            if (currentPage <= totalPage) {
                console.log("翻页");
                //加载第二页的数据
                goPage();
            }
        }
        //数据加载完毕，停止翻页
        if ($(window).height() + $(window).scrollTop() >= $(document).height() & currentPage > totalPage) {
            $(document).dialog({
                type: 'notice',
                infoText: '到底啦，扑街仔！',
                autoClose: 2500,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
        }
    })
</script>
</body>
</html>